1
I'm attempting to write some custom javascript for collapsing the tables and fit it in an existing application already provided. I found some code on the web that works great. In this example there are 3 fixed set of tables with 3 fixed/hardcoded "id".
I tried to fit this code into a FOR loop so it becomes dynamic and it would work for any number and not just 3 tables.
Expand|Select|Wrap|Line Numbers
- FOR (f, f>0, f++)
- <td style="background-color: #CCC"><a href="#" onclick="return toggleItem('collapse_myTbody1[f]')">Toggle 1</a></td></tr>
Has anyone done this before. Can anyone share some ideas or pointers?
Regards,
MHT
NY City.
[HTML]<html>
<head>
<title>My Doc</title>
<script language="javascript">
function getItem(id)
{
var itm = false;
if(document.getElementById)
itm = document.getElementById(id);
else if(document.all)
itm = document.all[id];
else if(document.layers)
itm = document.layers[id];
return itm;
}
function toggleAll(dowhat)
{
var tags = document.getElementsByTagName('tbody');
if(!tags)
return false;
for(var i = 0; i < tags.length; i++)
{
if(tags[i].className == 'collapse_obj')
{
if(dowhat == 'collapse')
tags[i].style.display = 'none';
else
tags[i].style.display = '';
}
}
return false;
}
function toggleItem(id)
{
itm = getItem(id);
if(!itm)
return false;
if(itm.style.display == 'none')
itm.style.display = '';
else
itm.style.display = 'none';
return false;
}
</script>
</head>
<body>
<a href="#" onclick="return toggleAll('collapse')">Collapse All</a>
<a href="#" onclick="return toggleAll('expand')">Expand All</a>
<table width="400">
<tbody>
<tr><td style="background-color: #CCC"><a href="#" onclick="return toggleItem('collapse_myTbody1')">Toggle 1</a></td></tr>
</tbody>
<tbody class="collapse_obj" id="collapse_myTbody1">
<tr><td>Test row1</td></tr>
<tr><td>Test row2</td></tr>
<tr><td>Test row3</td></tr>
<tr><td>Test row4</td></tr>
<tr><td>Test row5</td></tr>
</tbody>
</table>
<table width="400">
<tbody>
<tr><td style="background-color: #CCC"><a href="#" onclick="return toggleItem('collapse_myTbody2')">Toggle 2</a></td></tr>
</tbody>
<tbody class="collapse_obj" id="collapse_myTbody2">
<tr><td>Test row1</td></tr>
<tr><td>Test row2</td></tr>
<tr><td>Test row3</td></tr>
<tr><td>Test row4</td></tr>
<tr><td>Test row5</td></tr>
</tbody>
</table>
<table width="400">
<tbody>
<tr><td style="background-color: #CCC"><a href="#" onclick="return toggleItem('collapse_myTbody3')">Toggle 3</a></td></tr>
</tbody>
<tbody class="collapse_obj" id="collapse_myTbody3">
<tr><td>Test row1</td></tr>
<tr><td>Test row2</td></tr>
<tr><td>Test row3</td></tr>
<tr><td>Test row4</td></tr>
<tr><td>Test row5</td></tr>
</tbody>
</table>
</body>
</html>[/HTML]
